<script setup>
import { computed } from 'vue'
import { MicroService } from '../build/MicroService'
import ENV from '@/build/env'

const props = defineProps({
  files: {
    type: Array,
    default: () => []
  },
  config:{
    type:Object,
    default:()=>{
      return {
        label:'fileName',
        url:'fileAddress',
        type:'fileType',
        size:'fileSize'
      }
    }
  }
})
const base = `${ENV[ENV.env_name].api}/${MicroService.COMMON}`

const fileData = computed(() => {
  const { files = [], config} = props
  let _fs = files || []
  const {
    label,
    url,
    type,
    size
  } = config || {}
  return _fs.map(x => {

    const furl = `${base + x[url]}jpg`
    console.log(furl)
    return {
      label: x[label],
      url:furl,
      type:x[type],
      size:x[size],
    }
  })
})
const preview = function(item) {
  const {config} = props
  const {
    url,
  } = config || {}
  uni.previewImage({
    urls:[item[url]]
  })
}
</script>

<template>
  <div class="previewer-container">
    <div class="previewer-warp">
      <ol class="file-list">
        <li
          v-for="item in fileData"
          class="item"
          @click="preview(item)"
        >
          <image
            class="item__image"
            :src="item.url"
            mode="aspectFit"
            lazy-load
          />
        </li>
      </ol>
    </div>
  </div>
</template>

<style scoped lang="scss">
.previewer-container{

  .previewer-warp{
    min-height: 120rpx;
    .file-list{
      display: flex;

      .item{
        list-style-type: none;
        border: 1px #cccccc solid;
        margin: 12rpx 8rpx;
        border-radius: 5rpx;
        overflow: hidden;
        .item__image{
          width: 120rpx;
          height: 120rpx;
        }
      }
    }
  }
}
</style>
